<template>
	<view class="homeIndex">
		<u-swiper :list="swiperList" height='256'></u-swiper>
		<view class="content-box">
			<view class="grand"></view>
			<view class="recommend">
				<view class="flex-between-center top">
					<view class="number">合伙人 {{uid || ''}}</view>
					<view class="code flex-align-center" @click="goPage('./poster')">
						<image src="@/static/images/qrcode.png" mode=""></image>推荐码
					</view>
				</view>
				<view class="userData flex-align-center">
					<view>
						<view class="text">今日注册客户</view>
						<view class="num">{{orderStatics.todayRegister || 0}}</view>
					</view>
					<view>
						<view class="text">待审核客户</view>
						<view class="num">{{orderStatics.dsh || 0}}</view>
					</view>
					<view>
						<view class="text">已通过客户</view>
						<view class="num">{{orderStatics.ytg || 0}}</view>
					</view>
					<view>
						<view class="text">已结算客户</view>
						<view class="num">{{orderStatics.yjs || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recommendOrder">
			<view class="top flex-between-center">
				<view class="flex-align-center title">
					<view class="border"></view>我的推荐订单
				</view>
				<view class="more flex-align-center" v-if="orderList.length>0" @click="jump" >
					更多<image src="@/static/images/grayRight.png" mode=""></image>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="flex-between-center top">
						<view class="orderId">订单编号：{{item.orderNo}}</view>
						<view class="status">{{item.status | statusFilter}}</view>
					</view>
					<view class="flex-align-center bottom">
						<view class="left flex-aj-center">
							<image src="@/static/images/circle.png" class="circle" mode=""></image>
							<view class="line"></view>
							<image src="@/static/images/circle.png" class="circle" mode=""></image>
						</view>
						<view class="right">
							<view class="name">客户姓名：<text>{{item.name}}</text> </view>
							<view class="phone">联系电话：<text>{{item.phone}}</text> </view>
						</view>
					</view>

				</view>
				<view class="noData" v-if="orderList.length==0" >
					<image src="../../static/images/no-data.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '../../libs/login'
	import {
		hhrAppIndexSelfOrderStatistics
	} from "@/api/api.js"
	import {
		getOrderList
	} from "@/api/user.js"
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				swiperList: ["https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/34941714094716723.png"],
				orderStatics: {},
				orderList: []
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		onShow() {
			this.getIndex()
			this.getOrderList()
		},
		filters: {
			statusFilter: function(value) {
				if (value == 1) {
					return '已注册'
				} else if (value == 2) {
					return '待审核'
				} else if (value == 3) {
					return '审核拒绝'
				} else if (value == 4) {
					return '审核通过'
				} else if (value == 5) {
					return '可结算'
				} else {
					return ''
				}
			}
		},
		methods: {
			jump(){
				uni.switchTab({
					url:'/pages/order/index'
				})
			},
			getOrderList() {
				getOrderList({
					pageNum: 1,
					pageSize: 3
				}).then(res => {
					this.orderList = res.data.records;
				})
			},
			getIndex() {
				hhrAppIndexSelfOrderStatistics().then(res => {
					this.orderStatics = res.data
				})
			},
			goPage(url) {
				console.log("打印===",this.isLogin)
				if (!this.isLogin) {
					toLogin()
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homeIndex {
		.content-box {
			position: relative;

			.grand {
				position: absolute;
				top: -24rpx;
				left: 0rpx;
				width: 100%;
				height: 192rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.recommend {
			margin: 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx;

			.top {
				position: relative;
				z-index: 10;
				width: 100%;
				height: 96rpx;
				background: linear-gradient(135deg, #F57F31 0%, #EB6E1C 100%), #F57200;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 0 24rpx;

				.number,
				.code {
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFBE0;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
				}

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.code {
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}

			.userData {
				width: 100%;
				height: 144rpx;
				padding: 0 24rpx;

				>view {
					width: 144rpx;
					text-align: center;
					margin-right: 26rpx;

					&:last-child {
						margin-right: 0;
					}

					.text {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						text-align: center;
						font-style: normal;
						margin-bottom: 16rpx;
					}

					.num {
						width: 144rpx;
						height: 40rpx;
						font-family: D-DINExp;
						font-weight: bold;
						font-size: 40rpx;
						color: #292929;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}

		.recommendOrder {
			margin: 48rpx 24rpx;

			.top {
				.title {
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 36rpx;
					color: #292929;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
				}

				.border {
					width: 8rpx;
					height: 36rpx;
					background: #FF2945;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}

				.more {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 4rpx;
					}
				}
			}

			.list {
				.item {
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.top {
						width: 100%;
						height: 96rpx;
						background: #FAFAFA;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
						border: 2rpx solid #FFFFFF;
						padding: 0 24rpx;

						.orderId {
							font-family: PingFangSC;
							font-weight: 500;
							font-size: 32rpx;
							color: #292929;
							line-height: 32rpx;
							text-align: left;
							font-style: normal;
						}

						.status {
							font-family: PingFangSC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FF2945;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.bottom {
						padding: 48rpx 24rpx;

						.left {
							flex-direction: column;
							margin-right: 16rpx;

							.circle {
								width: 28rpx;
								height: 28rpx;
							}

							.line {
								width: 2rpx;
								height: 48rpx;
								border: 2rpx solid #EBEBEB;
							}
						}

						.right {

							.name,
							.phone {
								font-family: PingFangSC;
								font-weight: 400;
								font-size: 28rpx;
								color: #666666;
								line-height: 28rpx;
								text-align: left;
								font-style: normal;

								text {
									color: #292929;
								}
							}

							.name {
								margin-bottom: 48rpx;
							}
						}
					}
				}
			}
		}
	}
</style>